<template>
	<div class="system_box">
		<div class="system_content">
			<header>
				<div class="system_tabs">
					<span
						v-for="it in user_list"
						:class="{ active: select_user_type === it.value }"
						@click="selectUserType(it.value)">
						{{ it.label }}
					</span>
				</div>

				<el-button
					type="primary"
					link
					@click="editUserInfo({})">
					添加员工
				</el-button>
			</header>

			<div class="system_table">
				<el-table
					border
					:data="list"
					style="width: 100%; flex: 1">
					<el-table-column
						label="头像"
						width="65">
						<template #default="{ row }">
							<el-avatar
								shape="square"
								:src="row.headImg" />
						</template>
					</el-table-column>

					<el-table-column
						prop="name"
						label="姓名" />
					<el-table-column
						prop="roleName"
						label="角色" />
					<el-table-column
						prop="phone"
						label="手机号" />
					<el-table-column
						prop="username"
						label="用户名" />
					<el-table-column
						label="状态"
						width="70"
						fixed="right">
						<template #default="{ row }">
							<el-switch
								:model-value="row.status == 1"
								@change="editStatus(row)" />
						</template>
					</el-table-column>
					<el-table-column
						label="操作"
						width="130"
						fixed="right">
						<template #default="{ row }">
							<el-button
								type="primary"
								link
								@click="editUserInfo(row)">
								修改
							</el-button>

							<el-dropdown
								placement="bottom"
								trigger="click">
								<el-button
									type="primary"
									link
									style="margin-top: 3px">
									分配角色
								</el-button>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item
											v-for="it in role_list"
											@click="editRole(row, it.id)">
											{{ it.roleName }}
										</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</template>
					</el-table-column>
				</el-table>

				<div class="system_page">
					<el-pagination
						background
						layout="total, prev, pager, next"
						v-model:current-page="page"
						:total="total"
						@current-change="getList" />
				</div>
			</div>
		</div>
	</div>

	<!-- 创建修改用户 -->
	<addEditUserComp
		v-if="show_add_edit"
		:user="eidt_user_info"
		@closed="(show_add_edit = false), getList()" />
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import api from "@/api";
import addEditUserComp from "./add_edit_user.vue";
import { useDataList, useRoleList } from "@/utils/hook";
import { ElMessage } from "element-plus";

// 人员类型
const select_user_type = ref(0);
const user_list = ref([
	{
		label: "全部人员",
		value: 0,
	},
	{
		label: "超级管理员",
		value: 1,
	},
	{
		label: "销售员",
		value: 2,
	},
	{
		label: "工艺师",
		value: 3,
	},
	{
		label: "核价员",
		value: 4,
	},
	{
		label: "普通员工",
		value: 5,
	},
]);
const selectUserType = (value: number) => {
	select_user_type.value = value;
};

// 人员列表
const user_params = computed(() => {
	return {
		api: api.user.getUserList,
	};
});
const { list, page, total, getList } = useDataList(user_params);

// 添加修改人员
const eidt_user_info = ref<any>({});
const show_add_edit = ref(false);
const editUserInfo = (row: any) => {
	eidt_user_info.value = row;
	show_add_edit.value = true;
};

// 编辑人员状态
const editStatus = async (row: any) => {
	const msg = await api.user.updateUserStatus({
		userId: row.id,
		status: row.status == 1 ? 2 : 1,
	});
	if (msg.code == 1000) {
		ElMessage.success("修改状态成功");
		getList();
	}
};

// 角色列表
const { role_list } = useRoleList();
const editRole = async (row: any, roleCode: string) => {
	const msg = await api.user.editRole({
		userId: row.id,
		roleId: roleCode,
	});
	if (msg.code == 1000) {
		ElMessage.success("修改角色成功");
		getList();
	}
};

const init = () => {
	getList();
};
init();
</script>

<style lang="less" scoped></style>
